<template>
    <div class="user">
     <el-row>
          <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                   <el-col :span="24">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
                        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-col>
              </div>
         </el-col>
     </el-row>
     <template>
    <el-row>
      <el-col :span="24">
        <el-input placeholder="请输入内容" class="search-input">
          <el-button slot="append" icon="el-icon-search" ></el-button>
        </el-input>
        <el-button type="success" plain>添加</el-button>
      </el-col>
    </el-row>
        <!--表格-->
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
  <div class="block">
      <!--分页-->
    <el-pagination
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400">
    </el-pagination>
  </div>
    </template>
</div>
  
   
</template>
  <script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
    .el-row{
        margin: 10px 0;
    }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    background-color: #d3dce6;
    margin:10px 0;
    padding:10px 0 0 5px;
    box-sizing: border-box;
  }
.user {
  .margin-20 {
    margin: 20px 0;
  }
  .search-input {
    width: 300px;
  }
  .page {
    padding: 5px 0;
    background-color: #d3dce6;
  }
}
</style>